<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改学生信息</title>
    {include file="public/header"}
    <style>
        #img_area {
            position: relative;
            display: table-cell;
            width: 130px;
            height: 180px;
        }
        #img_area img{
            width: 130px;
        }
    </style>
</head>
<body>
<div class="card" id="app">
    <h2 ref="loading" class="alert alert-info text-center py-5 align-content-center" style="position: fixed;width: 100%;height: 100vh;z-index: 1000">
        加载中,请稍后
    </h2>
    <div class="card-header">
        <button class="btn btn-sm btn-info rounded-circle" onclick="history.back()">
            <span class="fa fa-arrow-left"></span>
        </button>
        <h5 class="text-center d-inline-block w-75 m-0">
            修改学生信息
        </h5>
    </div>
    <div class="card-body">
        <div class="card-body">
            <form action="" ref="my_form" class="form-group"  onsubmit="return false" @submit="sub">
                <h6>完善信息</h6>
                <label for="image_file" id="img_area" class="border border-secondary">
                    <img :src="img_src" class="position-absolute h-100 w-100">
                    <h4 class="h4 text-center"><span class="fa fa-plus fa-2x text-black-50 m-4"></span></h4>
                    <p class="m-3 text-center h5">上传照片</p>
                    <input id="image_file" hidden type="file" name="photo" @change="showImg">
                </label>
                <label for="">姓名</label>
                <input type="text" placeholder="请填写您的姓名" class="form-control" name="name" value="{$user.name}" required>
                <label for="">学院</label>
                <select name="college" class="form-control" @change="getClass">
                    <option value="{$user.college_id}" >{$user.college}</option>
                    <option :value="item.id" v-for="item in college">{{item.name}}</option>
                </select>
                <label for="">班级</label>
                <select name="class" class="form-control">
                    <option value="{$user.class_id}">{$user.class}</option>
                    <option :value="item.id" v-for="item in class_list">{{item.name}}</option>
                </select>
                <div>
                    <label>选择校区</label>
                    <select name="" id="" v-model="xiaoqu_id" @change="sel('gongyu','xiaoqu_id')" class="form-control">
                        <option value="">选择校区</option>
                        <option :value="item.id" v-for="item in xiaoqu">{{item.name}}</option>
                    </select>
                </div>

                <label for="" class="">选择公寓</label>
                <div class="input-group">
                    <select name="" v-model="gongyu_id" id="gongyu" class="form-control" @change="sel('danyuan','gongyu_id')">
                        <option :value="item.id" v-for="item in gongyu">{{item.name}}</option>
                    </select>
                </div>
                <label for="" class="">选择单元</label>
                <div class="input-group">
                    <select name="" id="danyuan" v-model="danyuan_id" class="form-control" @change="sel('louceng','danyuan_id')">
                        <option :value="item.id" v-for="item in danyuan">{{item.name}}</option>
                    </select>
                </div>
                <label for="" class="">选择楼层</label>
                <div class="input-group">
                    <select name="" id="loucheng" v-model="louceng_id" class="form-control" @change="sel('fangjian','louceng_id')">
                        <option :value="item.id" v-for="item in louceng">{{item.name}}</option>
                    </select>
                </div>
                <label for="fangjian" class="">房间号</label>
                <div class="input-group">
                    <select name="room" v-model="fangjian_id" id="fangjian" class="form-control">
                        <option :value="item.id" v-for="item in fangjian">{{item.name}}</option>
                    </select>
                </div>
                <input type="text" value="{$user.id}" hidden name="id">
                <button class="btn btn-outline-info m-3 mx-auto px-3">提交</button>
            </form>
        </div>
    </div>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            "gongyu":[],
            "fangjian":[],
            "danyuan":[],
            "louceng":[],
            gongyu_id:"",
            danyuan_id:"",
            "louceng_id":"",
            "fangjian_id":"",
            img_src :"/uploads/{$user.pic}",
            "xiaoqu":null,
            "xiaoqu_id":undefined,
            "college" : null,
            "class_list" : null,
        },
        methods: {
            sel:function (which_sel,cur) {
                $.getJSON("/index/getRoom&id="+this[cur],res=>this[which_sel]=res)
            },
            sub:function (event) {
                if (!confirm("确认信息无误?")) return;
                let post_data = new FormData(event.target)
                $.ajax({
                    url :"modifyStudentInfoSub",
                    contentType:false,
                    processData:false,
                    method:"POST",
                    data: post_data,
                    success: function (res) {
                        if (res.code == 200){
                            alert("提交成功");
                            location.reload();
                        }else {
                            alert("提交失败")
                        }
                    }

                })
            },
            showImg:function (event) {
                let file = event.target.files[0]
                $("img")[0].hidden=0
                this.img_src = URL.createObjectURL(file)
            },
            getClass:function (event) {
                let id = event.target.value;
                $.getJSON("/index/getClass?id="+id,res=>this.class_list = res)
            }
        },
        created:function () {
            $.getJSON("/index/allXiaoqu",res=>this.xiaoqu=res)
            $.getJSON("/index/getCollege",res=>this.college=res)
        },
        mounted:function () {
            this.$refs.loading.hidden = 1;
        }

    })
</script>
</body>
</html>